<template>
  <div class="tag-container" @click="addLabel">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { useTagLists } from "./../../store";
let store = useTagLists();
// 点击添加新标签事件
const addLabel = () => {
  const val = prompt("请输入新标签名称!");
  // 判断输入的内容 输入为空的时候不添加并且给提示信息
  if (val === "") {
    alert("请输入有效的内容.");
  } else {
    // 包括标签名称以及 active的选择样式判别属性
    const currentVal: any = { name: val, active: false };
    // 使用pinia中定义的方法向pinia Tags中添加新的标签
    store.addLabel(currentVal);
    // 向localStorage持久化添加标签
    // 要以字符串方式存储
    localStorage.setItem("Tags", JSON.stringify(store.Tags));
  }
};
</script>

<style scoped lang="less">
.tag-container {
  height: 50px;
  min-width: 21%;
  text-align: center;
  background-color: rgb(251, 186, 186);
  margin: 25px 20px 0px 10px;
  padding: 0px 10px;
  line-height: 50px;
  border-radius: 30px;
  font-size: 18px;
}
</style>
